<template>
  <div class="box">
  <el-row style="margin-top:10px">
  <el-col :span="16" style="height: 500px">
    <h1 style="line-height: 10px">视频详情</h1>
  <video  controls autoplay style="width: 90%;height: 90%" id="myvideo">
    <source :src="mvurl" type="video/mp4">
  </video>
    <div style="margin-top: 10px" >
      <p style="line-height: 10px;font-size: 20px;text-indent: 20px">{{mvdetail.name}}</p>
      <p style="text-indent: 20px" >
        <span style="margin-right: 20px">演唱:&nbsp;&nbsp;<span class="c" @click="search1(item.name)" style="margin: 2px" v-for="item in mvdetail.artists" :key="item">{{item.name}}</span></span>
        <span style="margin-right: 20px">播放次数:&nbsp;&nbsp;{{mvdetail.playCount }}</span>
        <span>发布时间:&nbsp;&nbsp;{{mvdetail.publishTime }}</span>
      </p>
    </div>
  </el-col>
    <el-col :offset="2" :span="6">
      <h1>相关推荐</h1>
      <div v-for="item in simiMV" :key="item" style="margin-bottom: 20px;display: flex;">
         <img :src="item.cover" width=150 @click="playMV(item.id);">
         <div style="position: relative" class="b">
          <p @click="search1(item.name)">{{item.name}}</p>
          <p @click="search1(item.artistName)">{{item.artistName}}</p>
         </div>
      </div>
    </el-col>
  </el-row>

    <div class="commentbox">
      <h2 class="a"><span>全部评论</span></h2>
      <div class="commentsList" v-for="item in mvcommentsList" :Key="item">
        <img :src="item.user.avatarUrl" class="avatar">
        <div>
          <p style="line-height: 20px">{{item.user.nickname}}</p>
          <p style="line-height: 10px;word-spacing:5px">{{item.timeStr}}  {{item.ipLocation.location}}</p>
          <p >{{item.content }}</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRoute} from "vue-router"
import {useMVStore,useSongsStore} from "@/Store/Pinia/pinia";
import axios from "axios";
import {useRouter} from "vue-router";
import {baseURL} from "@/request/index.js";
const router=useRouter();
const mvstore=useMVStore();
const songsStore=useSongsStore();
const route=useRoute();
const mvurl=ref(route.params.mvurl);
const simiMV=ref([]);
const mvdetail=ref("");
const getsimiMV=()=>{
  axios.post(baseURL+"/simi/mv?mvid="+mvstore.mvid).then((res)=>{
    console.log(res);
    simiMV.value=res.data.mvs;
  })
}
const getdetailmv=()=>{ //获取mv详情
  axios.post(baseURL+"/mv/detail?mvid="+mvstore.mvid).then((res)=>{
    console.log(res);
    mvdetail.value=res.data.data;
  })
}

const mvcommentsList=ref([]);
const getmvcomments=()=>{ //获取mv详情
  axios.post(baseURL+"/comment/mv?id="+mvstore.mvid).then((res)=>{
    console.log(res);
    mvcommentsList.value=res.data.comments;
  })
}
getdetailmv();
getsimiMV();
getmvcomments();
function playMV(mvid){
  axios.post(baseURL+"/mv/url?id="+ mvid).then((res) => { //获取相似mv
    mvurl.value = res.data.data.url;
  }).then(()=>{
    mvstore.$patch((state)=>{
      state.mvid=mvid;
    })
    router.replace({name:'empty',params:{mvurl:mvurl.value}})
  })
}
function  search1(value){
  songsStore.show=1;
  songsStore.search(value);
  router.push({path:'/homePage/searchList'})
}
</script>

<style scoped>
.box{
  width: 100%;
  height: 550px;
  overflow-y:scroll;
  overflow-x: hidden;
}
.commentbox{
  /*height: 300px;*/
  margin-left: 20px;
  margin-top: 30px;
  /*overflow-x: hidden;*/
  /*overflow-y: scroll;*/
}
.commentsList{
  width: 100%;
  height: 100px;
  display: flex;
  margin-top: 10px;
  border-bottom:1px solid rgba(65, 105, 225, 0.09);
}

.avatar{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.b p:hover{
  color: #8e09dc;
  cursor: pointer;
}
.c:hover{
  color: #8e09dc;
  cursor: pointer;
}
</style>